<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="include_title" value="司机绑定" />
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<style>
.title {text-align:center;padding:30px 10px 20px 10px;}
.validate-code{position:relative;}
.validate-code button{position:absolute;width:90px !important;right:0px;top:2px;text-align:right;}
.mui-btn-block {margin-top:20px;}
.logo{width: 120px;}
</style>
</head>
<body>
	<div class="mui-content">
		<div class="title"><img class="logo" src="${ctxStatic }/xiake/images/logo.png" /></div>
		<form id="bindForm" class="mui-input-group" action="${ctxWx }/bind" method="post">
			<input type="hidden" name="openid" value="${driver.openid }">
			<div class="mui-input-row">
				<label>手机号</label>
				<input type="text" id="phone" name="phone" value="${driver.phone }" class="mui-input-clear" placeholder="输入手机号">
			</div>
			<div class="mui-input-row validate-code">
				<label>验证码</label>
				<input name="validateCode" type="text" maxlength="6" placeholder="输入验证码">
				<button id="getCodeBtn" type="button" class="mui-btn mui-btn-link">获取验证码</button>
			</div>
		</form>
		<div class="mui-content-padded">
			<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="check();">绑定</button>
		</div>
	</div>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script>
		$(function(){
			$('#getCodeBtn').click(function(){
				if(typeof($("#getCodeBtn").attr("disabled"))=="undefined") {
					$.post('${ctxFront}/sms/send',{phone:$('#phone').val(),type:0},function(data){
						if(data!='success') {
							mui.alert(data);
						} else {
							mui.alert('短信已经发送，请注意查收')
							$("#getCodeBtn").css("width","120px !important");
							time();
						}
					});
				}
			});
		});
		var wait=120;
		
		function time() {
			if (wait == 0) {
				$('#getCodeBtn').removeAttr("disabled");
				$('#getCodeBtn').text("重新获取验证码");
				wait = 120;
			} else {
				$('#getCodeBtn').attr("disabled", "true");
				$('#getCodeBtn').text("重新获取(" + wait + ")");
				wait--;
				setTimeout(function() {
					time()
				}, 1000);
			}
		}
		function check(){
			var msg = '';
			var r = /^1[3|4|5|7|8]\d{9}$/;
			var payertel = $('#phone').val();
			if(payertel.trim() == ''){
				msg = '手机号不能为空';
			} else if(!r.test(payertel)){
				msg = '手机号不正确';
			} 
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#bindForm').submit();
			}
		}
	</script>
</body>
</html>